<template>
  <div class="about">
    <div class="flex flex-col items-start gap-4">
      <el-segmented v-model="value" :options="options" size="default" @change="changeSegmented(value)" />
    </div>
    <el-skeleton :loading="loading" animated :throttle="500" :count="2">
      <template #template>
        <div style="box-shadow: 0px 0px 12px rgba(0,0,0,0.12);">
          <div class="grid-box pd20" style="margin-top: 20px">
            <el-skeleton-item class="grid-item" style="min-height: 60px;" v-for="i in 8" :key="i" />
          </div>
          <div class="pd20" style="border-top: 1px solid #e4e7ed; border-bottom: 1px solid #e4e7ed;">
            <el-skeleton-item variant="image" style="width: 300px; height: 300px" />
          </div>
          <div class="cardFooter pd20">
            <el-skeleton-item variant="text" style="width: 10vw;height: 30px;" />
            <el-skeleton-item variant="text" style="width: 10vw;height: 30px;margin-left: 12px;" />
          </div>
        </div>
      </template>
      <template #default>
        <el-card v-for="item in cardData" :key="item.id" style="margin-top: 20px" v-infinite-scroll="throttledLoad">
          <template #header>
            <div class="grid-box">
              <div class="grid-item">wxopenid :<span>{{ item.wxopenid }}</span></div>
              <div class="grid-item">id :<span>{{ item.id }}</span></div>
              <div class="grid-item">发布链接 :<span>{{ item.article_url }}</span></div>
              <div class="grid-item">粉丝数量 :<span>{{ item.fans }}</span></div>
              <div class="grid-item">手机号 :<span>{{ item.phone }}</span></div>
              <div class="grid-item">发布时间:<span>{{ formatterT(item.release_time) }}</span></div>
              <div class="grid-item">
                状态:
                <span
                  :style="{ color: item.status == 0 ? '#424243' : item.status == 1 ? '#67C23A' : item.status == -1 ? '#F56C6C' : '' }">{{
                    item.status == 0 ? '待审核' : item.status == 1 ? '已通过' : '未通过' }}</span>
              </div>
              <div class="grid-item">上传时间 :<span>{{ formatterT(item.upload_time) }}</span></div>
            </div>
          </template>
          <div>
            <!-- <el-image style="width: 300px; height: 300px;margin: 0 10px;" v-for="(v, i) in item.image_base64" :key="i"
              :src="convertBase64ToImage(v)" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2"
              :preview-src-list="item.image_base64.map(convertBase64ToImage)" :initial-index="9" fit="cover">
            </el-image> -->
            <el-image style="width: 300px; height: 300px;margin: 0 10px;" v-for="(v, i) in item.image_urls" :key="i"
              :src="v" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2" :initial-index="9"
              :preview-src-list="item.image_urls" fit="cover">
            </el-image>
          </div>
          <template #footer>
            <div class="cardFooter">
              <el-button type="primary" :disabled="item.status != 0"
                @click="submit(item.id, item.wxopenid)">确认</el-button>
              <el-button type="danger" :disabled="item.status != 0" @click="fillInReason(item.id)">打回</el-button>
            </div>
          </template>
        </el-card>
      </template>
    </el-skeleton>

    <el-dialog v-model="centerDialogVisible" title="请填写打回原因" width="500" align-center @closed="closeDialog">
      <el-input v-model="revoke_remark" maxlength="255" type="text" />
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="hitBack">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref, onMounted, reactive } from 'vue';
import { getAllRecord, confirmRecord, hitBackRecord, hitBackRecordRemark } from "@/api";
import { formatterT } from "@/utils/formatTime";

const loading = ref(true)

let cardData = ref([]);
let isLoading = ref(false);

const value = ref('全部')

const options = ['全部', '待审核', '已通过', '驳回']

onMounted(() => {
  getAll();
});

let data = ref([])
const changeSegmented = async (v) => {
  cardData.value = data.value.filter((item) => {
    if (v === '全部') return getAll();
    if (v === '待审核') return item.status === 0;
    if (v === '已通过') return item.status === 1;
    if (v === '驳回') return item.status === -1;
  });
}

const load = () => {
  if (cardData.value == cardData.value) return
  pageData.value.page++
  getAllRecord(pageData.value)
}
let pageData = ref({
  page: 1,
  size: 10,
});

const convertBase64ToImage = (base64) => {
  return `data:image/jpeg;base64,${base64}`;
};
const getAll = async () => {
  if (isLoading.value) return;
  isLoading.value = true;
  const res = await getAllRecord(pageData.value);
  if (res.success) {
    loading.value = false;
    cardData.value = [...cardData.value, ...res.data];
    data.value = [...data.value, ...res.data];
  }
  isLoading.value = false;
};

const throttle = (func, delay) => {
  let lastCall = 0;
  return function (...args) {
    const now = new Date().getTime();
    if (now - lastCall < delay) {
      return;
    }
    lastCall = now;
    return func(...args);
  };
};

const throttledLoad = throttle(load, 2000);

const submit = async (id, wxopenid) => {
  const res = await confirmRecord({ id, wxopenid });
  if (res.success) {
    ElMessage.success(res.data);
    getAll();
  }
}

const centerDialogVisible = ref(false)
const revoke_remark = ref()
const fillInReason = (id) => {
  clockId.value = id
  centerDialogVisible.value = true
}
const clockId = ref()
const hitBack = async () => {
  const res = await hitBackRecord({ id: clockId.value, status: -1 });
  const remarkRes = await hitBackRecordRemark({ id: clockId.value, revoke_remark })
  if (remarkRes.success && res.success) {
    centerDialogVisible.value = false
    ElMessage.success('打回成功');
    getAll();
  }

}

const closeDialog = () => {
  revoke_remark.value = '';
};
</script>
<style scoped lang="scss">
.pd20 {
  padding: 20px;
}

.grid-box {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.grid-item {
  display: flex;
  justify-content: space-between;
  width: 100%;
  min-height: 45px;
  padding: 20px;
  background-color: #f0f2f5;
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.cardFooter {
  display: flex;
  justify-content: end;
  align-items: center;

  >button {
    width: 10vw;
  }
}

.demo-image__error .image-slot {
  font-size: 30px;
}

.demo-image__error .image-slot .el-icon {
  font-size: 30px;
}

.demo-image__error .el-image {
  width: 100%;
  height: 200px;
}
</style>
